<template>
  <el-menu default-active="1-4-1"
           class="el-menu-vertical-demo"
           text-color="#303133"
           active-text-color="aqua"
           @open="handleOpen"
           @close="handleClose"
           :collapse="isCollapse"
  >
    <h3 class="header-h3" >{{smag}}</h3>
    <el-menu-item v-for="p in NoComponents" :key="p.path" :index="p.path"  @click="cMenu(p)" >
      <i :class="p.icon"></i>
      <span slot="title">{{p.label}}</span>
    </el-menu-item>
    <el-submenu index="1" v-for="p in HasComponents" >
      <template slot="title">
        <i class="el-icon-video-camera-solid"></i>
        <span slot="title">{{p.label}}</span>
      </template >
      <el-menu-item-group v-for="p in p.children" :key="p.path" >
        <el-menu-item :index="p.path" :class="p.icon"  @click="cMenu(p)" >{{p.label}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    height: 100%;
  }
  .el-menu{
    border: none;
    height: 100%;
    background-color: rgba(44,60,60,.3);
    .header-h3{
     text-align: center;
     font-weight: 400;
     line-height: 48px;
    }
  }
</style>

<script>
export default {
  data() {
    return {
      mag:"后台管理系统",
      timer:null,
      // isCollapse: false,
      menu:[
        {
          path:"/",
          name:"home",
          label:"首页",
          icon:"el-icon-eleme",

        },
        {
          path:"/user",
          name:"user",
          label:"用户管理",
          icon:"el-icon-s-order",
        },
        {
          path:"/shop",
          name:"shop",
          label:"商品管理",
          icon:"el-icon-success",
        },
        {
          label:"其他",
          icon: "s-home",
          children:[
            {
              path:"/page1",
              name:"page1",
              label:"每天一笑",
              icon:"el-icon-s-promotion",
            },
            {
              path:"/page2",
              name:"page2",
              label:"页面2",
              icon:"el-icon-s-marketing",
            },
          ]
        }
      ],
      list:[]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    cMenu(p){
      console.log(this,"rgerggr")
      //检查当前页面的路由与想要跳转的路由的路径不一样时进行跳转   :注意$router是整个路由的实例 而$route是当前页面的实例路由
      if (this.$route.name !== p.name){
        this.$router.push({
          name:p.name,
        })
      }
    },
    chasMenu(p){
      console.log(this,"iuegkuyjgkrkjf,dhla")
      //检查当前页面的路由与想要跳转的路由的路径不一样时进行跳转   :注意$router是整个路由的实例 而$route是当前页面的实例路由
      if (this.$route.name !== p.name){
        this.$router.push({
          name:p.name,
        })
      }
    },
    opens(p){
      this.isCollapse = p
    }

  },
  computed:{
    NoComponents(){
     return this.menu.filter(p=>{
        return !p.children
      })
    },
    HasComponents(){
      return this.menu.filter(p=>{
        return p.children
      })
    },
    smag:function (){
       this.mag =this.$store.state.tab.isCollapse?"后台":"后台管理系统"
      return this.mag
    },
    isCollapse(){
      return this.$store.state.tab.isCollapse
    }
  },

  mounted () {
    this.$bus.$on("opens",this.opens)
    console.log(this.$store)
    console.log(this.$store.state.tab.isCollapse)
    // console.log(this.$router.push({
    //   name:name
    // }))
   console.log( this.$route.path)
   // this.timer= setTimeout(()=>{
   //    location.reload()
   //  },100)

  },

  beforeMount () {
    this.$bus.$off("opens",this.opens)
    // clearTimeout(this.timer)
  }
}
</script>
